<template>
	<view class="wallt">
		<statusBar />
		<!-- 设置 -->
		<view @tap="leftIndex" class="nav">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>设置-钱包</view>
		</view>
		
		<view style="padding-top: 100upx;">
			<!-- 余额 -->
			<view class="banner">
				<view class="balance">
					<view>
						<view>0.00</view>
						<view>可提供余额 (元)</view>
					</view>
					<view>提现</view>
				</view>
				<!-- 线 -->
				<view class="line"></view>
				<view class="account">
					<view>
						<image src="../../static/setup/banner.png" mode=""></image>
						<text>余额流水</text>
					</view>
					<view>
						<image src="../../static/setup/yinhang.png" mode=""></image>
						<text>查看账户</text>
					</view>
					<view>
						<image src="../../static/setup/dingdan.png" mode=""></image>
						<text>订单查询</text>
					</view>
				</view>
			</view>
			<!-- 今日实时账单（单位/元） -->
			<view class="bill">
				<view>
					<view>今日实时账单（单位/元）</view>
					<view>2020-08-12</view>
				</view>
				<view>
					<view>￥0.00</view>
					<image src="../../components/min-collapse/arrow.png" mode=""></image>
				</view>
			</view>
			
			<!-- 近7天账单 -->
			<view class="nearly"><echarts :option="option" style="height: 300px;"></echarts></view>
			<!-- 历史账单 -->
			<view class="History">
				<view>
					<view class="Hisboii">
						<view>
							<view>历史账单</view>
							<view>单位/元</view>
						</view>
						<view>
							<view>全部历史账单</view>
							<image src="../../components/min-collapse/arrow.png" mode=""></image>
						</view>
					</view>
					<view class="single">
						<view>至</view>
						<view>0.00</view>
					</view>
					<view class="singleone">最近已结算账单</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
import echarts from '@/components/echarts/echarts.vue';

export default {
	data() {
		return {
			option: {
				splitLine: false,
				tooltip: {},
				legend: {
					data: ['已结算', '待结算'],
					itemWidth: 9, // 设置宽度
					itemHeight: 9, // 设置高度
					textStyle: {
						//文字样式
						color: '#666666',
						fontSize: '12'
					}
				},

				xAxis: {
					data: ['08-07', '08-07', '08-07', '08-07', '08-07', '08-07']
				},
				yAxis: {
					axisLine: {
						//y轴
						show: false
					},
					axisTick: {
						//y轴刻度线
						show: false
					},
					splitLine: {
						//网格线
						show: false
					}
				},
				series: [
					{
						name: '已结算',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						barWidth: 8,
						itemStyle: {
							color: '#35394C'
						}
					},
					{
						name: '待结算',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						barWidth: 8,
						itemStyle: {
							// 点的颜色。
							color: '#C9CCD1'
						}
					}
				]
			}
		};
	},
	components: {
		statusBar,
		echarts,
		
	},
	onLoad() {},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 2
			});
		}
	}
};
</script>
<style lang="scss" scoped>
	
.wallt {
	.nav {
		display: flex;
		align-items: center;
		padding-top: 40upx;
		padding: 50upx 30upx 31upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		image {
			width: 27upx;
			height: 30upx;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.banner {
		background: linear-gradient(-26deg, rgba(251, 201, 112, 1) 0%, rgba(255, 234, 185, 1) 100%);
		border-radius: 10upx;
		width: 95%;
		margin: 0upx auto;
		.balance {
			padding: 57upx 47upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			& > view:nth-child(1) {
				& > view:nth-child(1) {
					font-size: 60upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: $bg2-color;
				}
				& > view:nth-child(2) {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg2-color;
					margin-top: 25upx;
				}
			}
			& > view:nth-child(2) {
				width: 124upx;
				height: 72upx;
				border: 2upx solid rgba(53, 57, 76, 1);
				border-radius: 4upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
			}
		}
		.line {
			width: 100%;
			height: 2upx;
			background: $bg1-color;
			border-radius: 1upx;
		}
		.account {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 31upx 41upx 37upx 41upx;
			& > view:nth-child(1) {
				display: flex;
				align-items: center;
				image {
					width: 26upx;
					height: 26upx;
				}
				& > text {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg2-color;
					margin-left: 7upx;
				}
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				image {
					width: 28upx;
					height: 23upx;
				}
				& > text {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg2-color;
					margin-left: 7upx;
				}
			}
			& > view:nth-child(3) {
				display: flex;
				align-items: center;
				image {
					width: 23upx;
					height: 28upx;
				}
				& > text {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg2-color;
					margin-left: 7upx;
				}
			}
		}
	}
	.bill {
		width: 95%;
		margin: 0 auto;
		height: 117upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 4upx;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		& > view:nth-child(1) {
			margin-left: 26upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
			}
			& > view:nth-child(2) {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg5-color;
				margin-top: 10upx;
			}
		}
		& > view:nth-child(2) {
			margin-right: 26upx;
			display: flex;
			align-items: center;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg-color;
			}
			image {
				width: 27upx;
				height: 30upx;
				margin-left: 12upx;
			}
		}
	}

	.nearly {
		width: 95%;
		margin: 20upx auto;
		background: $bg1-color;
	}
	// 历史账单
	.History {
		width: 95%;
		margin: 20upx auto;
		background: $bg1-color;
		.Hisboii {
			padding: 24upx 26upx 24upx 26upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			& > view:nth-child(1) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg2-color;
				}
				& > view:nth-child(2) {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg5-color;
					margin-left: 18upx;
				}
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg5-color;
				}
				image {
					width: 27upx;
					height: 30upx;
				}
			}
		}
	    .single{
			padding: 24upx 26upx 24upx 26upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&>view{
				font-size:32upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:$bg2-color;
			}
		}
		.singleone{
			padding: 24upx 24upx;
			font-size:24upx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:$bg5-color;
			margin-top: 12upx;
			
		}
	}
	
}
</style>
